<script setup>
import {reactive, onMounted} from "vue";

let detailData = reactive({});

// 将路由传输的数据解析成props的形式
const props = defineProps(["id"]);

const url = "http://20.187.111.28:3000/getgoods";

onMounted(()=>{
    fetch(url + "?id=" + props.id).then(res=>res.json()).then(res=>{
        const d = res.data[0];
        detailData.goodsImg = d.goodsImg;
        detailData.goodsName = d.goodsName;
        detailData.price = d.price;
        detailData.sale = d.sale;
        detailData.stock = d.stock;
    })
})
</script>

<template>
  <div class="mi-detail" id="appDetail">
    <div class="product-intro">
        <!-- 放大镜,start -->
        <div class="magnifier-wrap fl">
            <div class="smallimg-box">
                <img :src="detailData.goodsImg" alt="">
                <span></span>
            </div>
            <div class="magnifier-banner-wrap">
                <ul>
                    <li>
                        <img :src="detailData.goodsImg" alt="">
                    </li>
                    <li>
                        <img :src="detailData.goodsImg" alt="">
                    </li>
                </ul>
            </div>
            <div class="btn">
                <input type="button" class="iconfont" value="&#xe603;" id="left">
                <input type="button" class="iconfont" value="&#xe629;" id="right">
            </div>
            <div class="share">
                <a href="#">
                    <i class="iconfont">&#xe62a;</i>
                    <span>收藏商品&nbsp;&nbsp;（31036人气）</span>
                </a>
                <a href="#">举报</a>
            </div>
        </div>
        <div class="bigimg-box">
            <img :src="detailData.goodsImg"  alt="">
        </div>
        <!-- 放大镜,end -->
        
        <!-- 产品介绍 -->
        <div class="product-con fl">
            <div class="product-title">
                <h1 class="title-text">{{detailData.goodsName}}</h1>
            </div>
            <div class="product-price">
                <dl class="price-cur">
                    <dt class="metatit">价格</dt>
                    <dd>
                        <span class="price">¥{{detailData.price}}元</span>
                    </dd>
                </dl>
                <dl class="shopPromotion-title">
                    <dt class="metatit">活动一</dt>
                    <dd>满6900元减2000元</dd>
                    <a class="more">
                        更多优惠
                        <i class="iconfont">&#xe69a;</i>
                    </a>
                </dl>
            </div>

            <div class="meta">
                <dl class="delivery-panel">
                    <dt class="metatit">运费</dt>
                    <dd class="postAge">
                        <span class="deliveryAdd">北京</span>
                        至
                        <span class="mui_addr_icon ">上海 黄浦区 </span>
                        <i class="iconfont">&#xe69a;</i>
                        <div class="postAge-info">
                            <p>快递: 0.00 </p>
                        </div>
                    </dd>
                </dl>
            </div>

            <ul class="ind-panel">
                <li class="ind-item">
                    <span class="label">月销量</span>
                    <span class="count">1000+</span>
                </li>
                <li class="ind-item">
                    <span class="label">累计评价</span>
                    <span class="count">1882</span>
                </li>
                <li class="ind-item">
                    <span class="label">送小米积分 <i>999</i>起</span>
                </li>
            </ul>

            <div class="type-list">
                <dl class="Network-sel">
                    <dt>网络类型</dt>
                    <dd class="Network">SA/NSA双模(5G)</dd>
                </dl>
                <dl class="phone-type">
                    <dt>选择颜色</dt>
                    <dd class="color-black">黑色</dd>
                    <dd class="color-blue">陶瓷特别版</dd>
                </dl>
                <dl class="Package-type">
                    <dt>购买方式</dt>
                    <dd class="Package">官方标配</dd>
                </dl>
                <dl class="storage-type">
                    <dt>存储容量</dt>
                    <dd class="storage-capacity-1">12+256GB</dd>
                    <dd class="storage-capacity-2">12+512GB</dd>
                    <dd class="storage-capacity-3">16+512GB</dd>
                </dl>
            </div>
            <div class="amount">
                <span class="num">数量</span>
                <input class="number" value="1" maxlength="8" title="请输入购买量">
                <div class="mui-amount-btn">
                    <span class="mui-amount-increase iconfont">&#xe601;</span>
                    <span class="mui-amount-increase iconfont">&#xe731;</span>
                </div>
                <span class="several_pieces">件</span>
            </div>
            <div class="btn-action">
                <a v-if="detailData.sale == 3973" class="J_LinkBasket">
                    到货通知
                </a>
                <span v-else>
                    <div class="btn-buy">
                        <a href="#" title="点击此按钮，到下一步确认购买信息。">立即购买</a>
                    </div>
                    <div class="btn-basket" id="">
                        <i style="display: none;">
                            <span></span>
                        </i>
                        <a class="J_LinkBasket">
                            <em class="iconfont">&#xe638;</em>
                            加入购物车
                        </a>
                    </div>
                </span>
            </div>

            <div class="ser-wrap">
                <dl class="ser-box">
                    <dt class="metatit">服务承诺</dt>
                    <dd class="ser-list">
                        <ul class="serPromise">
                            <li>
                                <a href="#">全国联保</a>
                            </li>
                            <li>
                                <a href="#">正品保证</a>
                            </li>
                            <li>
                                <a href="#">免举证退换货</a>
                            </li>
                            <li>
                                <a href="#">极速退款</a>
                            </li>
                            <li>
                                <a href="#">退货运费险</a>
                            </li>
                            <li>
                                <a href="#">七天无理由退换</a>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <div class="pay-box">
                    <span>支付方式</span>
                    <i class="iconfont">&#xe731;</i>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
